/**
* @author: zhazhjie
* @email: zhazhjie@vip.qq.com
* @date: 2018-11-05 15:33:58
* @version: 1.0
*/

<template>
  <crud-template :config="config" :callbacks="callbacks"/>
</template>

<script>
import {copy, listToMap, toTreeData} from "js-utils";
import {getIconList} from "@/utils/util";
import {sysMenuApi} from "@/api/sys/SysMenuApi";
import {SysMenu} from "@/entity/sys/SysMenu";

export default {
  data() {
    return {
      iconList: [],
      tableLoading: false,
      menuMap: {},
      menuTree: [],
      selectMenuTree: [],
      config: this.ConfigWrapper.convert({
        beforeOpen: (row, done) => {
          this.toggleColumns(row.menuType);
          if (row.id) {
            this.findParentId(row, done);
          }
          done();
        },
        pageable: false,
        searchable: false,
        $table: {props: {rowKey: 'id'}},
        $dialog: {props: {width: '500px'}},
        $handler: {props: {width: '125px'}},
        columns: [
          {
            label: '名称',
            field: 'menuName',
          },
          {
            label: '类型',
            field: 'menuType',
            disabledInEdit: true,
            options: [{value: 0, text: "目录"}, {value: 1, text: "菜单"}, {value: 2, text: "按钮"}],
            type: 'tag',
            tagMapping: {
              0: "primary",
              1: "success",
              2: "info"
            },
            $dialog: {
              type: "radio",
              value: 0,
              on: {
                change: (type) => {
                  this.toggleColumns(type);
                }
              }
            }
          },
          {
            hide: true,
            label: '上级',
            field: 'selectedMenu',
            options: () => this.selectMenuTree,
            $dialog: {
              type: 'cascader',
              props: {
                collapseTags: true,
                props: {
                  label: "menuName",
                  value: "id",
                  checkStrictly: true,
                  expandTrigger: "hover"
                },
              },
              attrs: {
                style: "width:100%"
              },
              on: {
                change: (val) => {
                  this.handleSelectNode(this.$crud.curRow, val);
                }
              }
            }
          },
          {
            label: '图标',
            field: 'icon',
            render: row => <i class={row.icon}></i>,
            options: () => this.iconList,
            $dialog: {
              type: 'select',
              props: {
                filterable: true,
              },
              attrs: {
                style: "width:100%"
              },
              select: {
                render: (row) => {
                  return (
                    <span>
                      <i style="margin-right: 5px" class={row}></i>
                      <span>{row}</span>
                    </span>
                  )
                }
              }
            },
          },
          {
            label: '排序',
            field: 'sort',
          },
          {
            label: '路径',
            field: 'path',
            props: {
              showOverflowTooltip: true,
            }
          },
          {
            label: '授权标识',
            field: 'perms',
            props: {
              showOverflowTooltip: true
            },
            $dialog: {
              attrs: {
                placeholder: '授权标识（如：sys:user:add）',
              }
            }
          },
          {
            label: '导航隐藏',
            field: 'hideFlag',
            hide: true,
            value: 0,
            options: [{value: 1, text: "是"}, {value: 0, text: "否"}],
            $dialog: {
              type: "radio",
              value: 0
            },
          },
        ],
        handlerList: [
          {
            label: '编辑',
            icon: 'el-icon-edit'
          },
          {
            label: '删除',
            icon: 'el-icon-delete',
            click: row => {
              this.$crudTmp.handleDelete(row, row.menuName);
            }
          }
        ],
        rules: {
          menuName: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'},
          ],
          perms: [
            {required: true, message: '请输入授权标识', trigger: 'blur'},
          ],
          path: [
            {required: true, message: '请输入路径', trigger: 'blur'},
          ]
        },
      }, new SysMenu()),
      callbacks: {
        beforeSubmitAdd: this.setParentId,
        beforeSubmitEdit: this.setParentId,
        afterSubmitSearch: this.setMenuList,
      }
    }
  },
  components: {},
  methods: {
    toggleColumns(type) {
      if (type === 0) {
        this.$crud.showColumns([3, 4], "$dialog");
        this.$crud.hideColumns([5, 6, 7], "$dialog");
      } else if (type === 1) {
        this.$crud.showColumns([3, 4, 5, 7], "$dialog");
        this.$crud.hideColumns([6], "$dialog");
      } else {
        this.$crud.showColumns([6], "$dialog");
        this.$crud.hideColumns([3, 4, 5, 7], "$dialog");
      }
    },
    handleSelectNode(row, val) {
      if (!val) return;
      for (let i = 0; i < val.length; i++) {
        let perms = this.menuMap[val[i]];
        if (perms && (perms.id === row.id)) {
          row.selectedMenu = [];
          return this.$message.warning("不能选自己及子节点作为上级");
        }
      }
      row.selectedMenu = val;
    },
    setMenuList(res) {
      res.data.forEach(v => v.selectedMenu = []);
      this.selectMenuTree = toTreeData(copy(res.data).filter(v => v.menuType !== 2));
      this.menuMap = listToMap(res.data);
      this.$crudTmp.list = toTreeData(res.data);
    },
    setParentId(row) {
      return row.parentId = row.selectedMenu[row.selectedMenu.length - 1] || "0";
    },
    findParentId(row, done) {
      if (row) {
        let result = [];
        let parent = this.menuMap[row.parentId];
        while (parent) {
          result.unshift(parent.id);
          parent = this.menuMap[parent.parentId];
        }
        row.selectedMenu = result;
      }
      done();
    },
    getIconList() {
      getIconList().then(data => {
        this.iconList = data;
      })
        .catch(err => err)
    },
  },
  computed: {},
  mounted() {
    this.$crudTmp.injectApi(sysMenuApi);
    this.getIconList();
  }
}
</script>

<style scoped>

</style>
